// Methods to display lzlumen tags.
//
// Copyright (C) 2009  Brandon Beresini
// 
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
// 
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
// 
// You should have received a copy of the GNU General Public License
// along with this program.  If not, see <http://www.gnu.org/licenses/>.

var lzLumenIndex = 0;

var imageWidth = 0;
var imageHeight = 0;

var imageOffsetX;
var imageOffsetY;

var spotlightMoveCount = 0;
var hasMouseOver = 0;

function spotlight (left, right, top, bottom) {
	
	var leftMask = document.getElementById("leftMask");
	var rightMask = document.getElementById("rightMask");
	var topMask = document.getElementById("topMask");
	var bottomMask = document.getElementById("bottomMask");
	
	var leftGradient = document.getElementById("leftGradient");
	var rightGradient = document.getElementById("rightGradient");
	var topGradient = document.getElementById("topGradient");
	var bottomGradient = document.getElementById("bottomGradient");
	
	leftMask.style.width = left + "px";
	rightMask.style.left = right + imageOffsetX + "px";
	rightMask.style.width = imageWidth - right + "px";
	topMask.style.height = top + "px";
	topMask.style.left = left + imageOffsetX + "px";
	topMask.style.width = right - left + "px";
	bottomMask.style.top = bottom + imageOffsetY + "px";
	bottomMask.style.left = left + imageOffsetX + "px";
	bottomMask.style.width = right - left + "px";
	bottomMask.style.height = imageHeight - bottom + "px";
}

function getCurrentSpotlightLocation () {
	
	var leftMask = document.getElementById("leftMask");
	var rightMask = document.getElementById("rightMask");
	var topMask = document.getElementById("topMask");
	var bottomMask = document.getElementById("bottomMask");
	
	var current = [];
		
	current[0] = parseInt(leftMask.style.width);
	current[1] = parseInt(rightMask.style.left) - imageOffsetX;
	current[2] = parseInt(topMask.style.height);
	current[3] = parseInt(bottomMask.style.top) - imageOffsetY;
	
	return current;
	
}

function spotlightMover (leftEnd, rightEnd, topEnd, bottomEnd) {
	
	spotlightMoveCount++;
	
	var singleMoveControl = spotlightMoveCount;

	var current = getCurrentSpotlightLocation();
	
	var left = parseInt(current[0]);
	var right = parseInt(current[1]);
	var top = parseInt(current[2]);
	var bottom = parseInt(current[3]);
	
	var changeLeft = (leftEnd - current[0]) / 15;
	var changeRight = (rightEnd - current[1]) / 15;
	var changeTop = (topEnd - current[2]) / 15;
	var changeBottom = (bottomEnd - current[3]) / 15;
	var i = 0;
	
	var mover = setInterval(function(){
		i++;
		spotlight(parseInt(left + i * changeLeft), parseInt(right + i * changeRight), parseInt(top + i * changeTop), parseInt(bottom + i * changeBottom));
		if(singleMoveControl != spotlightMoveCount) {
			clearInterval(mover);
		}	
		
		if(i >= 14) {
				spotlight(leftEnd, rightEnd, topEnd, bottomEnd);
				clearInterval(mover);
			}
	}, 20);
	
}

function delayForMouseOver () {
	var delayCount = 0;
	
	hasMouseOver = 0;
	
	var delayer = setInterval(function (e) {
		if (delayCount >= 1) {
			spotlightMover(0, imageWidth, 0, imageHeight);
			clearInterval(delayer);
		}
		if (hasMouseOver == 1) {
			clearInterval(delayer);
		} else {
			delayCount++;
		}
	}, 10)
}

function lzLumenStyler () {
	
	styleText = "<style>#leftMask {position: absolute; background-color: #000; opacity: .75;} #rightMask {position: absolute; background-color: #000; opacity: .75;} #topMask {position: absolute; background-color: #000; opacity: .75; } #bottomMask {position: absolute; background-color: #000; opacity: .75;} #tagsTable {border: thin solid #000; background-color: #aaa; border-collapse: collapse; position: absolute; text-align: center;} #tagsTable td {border: thin solid #000;}</style>";
	return styleText;
}

function spotlightInitializer (lzLumenPicture) {
	if (document.lzLumenPicture.width > document.lzLumenPicture.height) {
    if (document.lzLumenPicture.width > 600) {
      document.lzLumenPicture.width = 600;
    } 
  } else if (document.lzLumenPicture.height > 600) {
    document.lzLumenPicture.height = 600;
  }
  imageOffsetX = document.lzLumenPicture.offsetLeft;
  imageOffsetY = document.lzLumenPicture.offsetTop;
  imageWidth = document.lzLumenPicture.offsetWidth;
  imageHeight = document.lzLumenPicture.offsetHeight;
	var width = lzLumenPicture.width;
	var height = lzLumenPicture.height;
	document.getElementById("leftMask").style.left = imageOffsetX + "px";
	document.getElementById("leftMask").style.width = 0 + "px";
	document.getElementById("leftMask").style.top = imageOffsetY + "px";
	document.getElementById("leftMask").style.height = height + "px";
	document.getElementById("rightMask").style.left = imageOffsetX + width + "px";
	document.getElementById("rightMask").style.width = 0 + "px";
	document.getElementById("rightMask").style.top = imageOffsetY + "px";
	document.getElementById("rightMask").style.height = height + "px";
	document.getElementById("topMask").style.left = imageOffsetX + "px";
	document.getElementById("topMask").style.width = width + "px";
	document.getElementById("topMask").style.top = imageOffsetY + "px";
	document.getElementById("topMask").style.height = 0 + "px";
	document.getElementById("bottomMask").style.left = imageOffsetX + "px";
	document.getElementById("bottomMask").style.width = width + "px";
	document.getElementById("bottomMask").style.top = imageOffsetY + height + "px";
	document.getElementById("bottomMask").style.height = 0 + "px";
	document.getElementById("tagsTable").style.left = imageOffsetX + "px";
	document.getElementById("tagsTable").style.top = imageOffsetY + height + 10 + "px";
	document.getElementById("tagsTable").style.width = width + "px";
}

function tagsTableMaker (tags) {
	var tagsTableHTML = "";
	tagsTableHTML += "<table id='tagsTable' onmouseout=' delayForMouseOver();' >";
	tagsTableHTML += "<tr>";
	for (var tag = 0; tag < tags.length; tag++) {
		thisTag = tags[tag];
		tagsTableHTML += "<td onmouseover='hasMouseOver = 1; spotlightMover(" + thisTag[1] + ", " + thisTag[2] + ", " + thisTag[3] + ", " + thisTag[4] + ");'>"
		tagsTableHTML += thisTag[0]
		tagsTableHTML += "</td>";
	}
	tagsTableHTML += "</tr>";
	tagsTableHTML += "</table>";
	return tagsTableHTML;
}

function maskMaker () {
	var masksHTML = "";
	masksHTML += "<div id='leftMask'></div>";
  masksHTML += "<div id='rightMask'></div>";
  masksHTML += "<div id='topMask'></div>";
  masksHTML += "<div id='bottomMask'></div>";
	return masksHTML;
}

function lzLumenMaker (divID, imageSrc, tags) {
	lzLumenDiv = document.getElementById(divID);
	var lzLumenDivHTML;
	lzLumenDivHTML = "<div id='lzLumenPictureDiv'>";
	lzLumenDivHTML += "<img id='lzLumenPicture' name='lzLumenPicture' src='" + imageSrc + "' />";
	lzLumenDivHTML += tagsTableMaker(tags);
	lzLumenDivHTML += maskMaker();
	lzLumenDivHTML += "</div>";
	lzLumenDiv.innerHTML = lzLumenDivHTML;
	document.lzLumenPicture.onload = function () {
    spotlightInitializer(document.lzLumenPicture);
  }
}

function getOffset (object) {
	var objectOffset = []
	
	objectOffset[0] = object.offsetLeft + 4;
	objectOffset[1] = object.offsetTop + 4;
	
	
	if (object.offsetParent) {
		var parentOffset = getOffset(object.offsetParent);
		objectOffset[0] += parentOffset[0];
		objectOffset[1] += parentOffset[1];
	}
	
	return objectOffset;
	
}